<template>
	<view class="page_bg">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="top_nav">
			<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image_1" @click="pageBack" />
			<view class="cate">错题集</view>
			<view class="control" @tap="change">{{control ? '管理' : '完成'}}</view>
		</view>
		<z-paging ref="paging" class="z-paging" v-model="collection" @query="getCollectionList"
			:empty-view-fixed="false" :fixed="false" :hide-loading-more-when-no-more-by-limit="5">
			<view class="c_item" v-for="item in collection" :key="item._id" @tap="checkDetail(item)">
				<view class="left_type">{{qType(item.questions.type)}}</view>
				<view class="middle_text">
					<mp-html :content="item.questions.title"></mp-html>
				</view>
				<view class="right_btn" @tap="addOrDel(item._id)" v-if="!control">
					<block v-if="selectedList.indexOf(item._id) != -1">
						<image src="/static/local/3f4ca7ffd06c638027e9f6c9b8d26777.png" class="image_1"></image>
					</block>
					<block v-else>
						<image src="/static/local/6cf5887aabd56974b4ba23430d867fb4.png" class="image_1"></image>
					</block>
				</view>
			</view>
		</z-paging>
		<view class="end_c" v-if="!control">
			<view class="left" @tap="selectAll">
				<block v-if="selectedList.length == collection.length">
					<image src="/static/local/3f4ca7ffd06c638027e9f6c9b8d26777.png" class="image_1"></image>
				</block>
				<block v-else>
					<image src="/static/local/29c413e53a15df5ab4cc3bd630338534.png" class="image_1"></image>
				</block>
				<text>全选</text>
			</view>
			<view class="right" @tap="modalShow = true">删除</view>
		</view>

		<u-modal v-model="modalShow" :show-title="false" content="确认删除所选项么？" show-cancel-button
			@confirm="deleteCollection">
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				control: true,
				// 收藏列表
				collection: [],
				// 全选列表
				selectedList: [],

				modalShow: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		computed: {
			qType() {
				return (type) => {
					switch (type) {
						case '1':
							return '单选题'
						case '2':
							return '多选题'
						case '3':
							return '判断题'
					}
				}
			}
		},
		methods: {
			// 页面数据初始化函数
			init(options) {},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			change() {
				if (this.control) this.selectedList = []
				this.control = !this.control
			},
			// 获取收藏列表
			getCollectionList(pageIndex, pageSize) {
				vk.callFunction({
					url: 'client/quest-bank/kh/error/getInError',
					title: "加载中...",
					data: { pageIndex, pageSize, need_user_info: true },
					success(res) {
						that.$refs.paging.complete(res.rows);
					}
				})
			},
			// 增删选项状态
			addOrDel(id) {
				let index = this.selectedList.indexOf(id)
				if (index == -1) {
					this.selectedList.push(id)
					return
				}
				this.selectedList.splice(index, 1)
			},
			// 全选
			selectAll() {
				if (this.selectedList.length == this.collection.length) {
					this.selectedList = []
					return
				}
				this.selectedList = []
				this.collection.map(v => {
					this.selectedList.push(v._id)
				})
			},
			// 删除
			deleteCollection() {
				vk.callFunction({
					url: 'client/quest-bank/kh/error/deleteError',
					data: { list: this.selectedList, need_user_info: true },
					success(res) {
						that.change()
						that.$refs.uToast.show({
							title: '删除成功',
							type: 'success'
						})
						that.$refs.paging.reload()
					}
				})
			},
			checkDetail(item) {
				if (!this.control) return
				vk.setStorageSync('qs-detail', item)
				vk.navigateTo('./questions-item')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		background-color: #ffffff;
		width: 100%;
		height: 100vh;
		overflow-y: auto;

		.status_bar,
		.top_view {
			background-color: #FDD303;
		}

		.top_nav {
			padding-bottom: 24rpx;
			color: rgb(51, 51, 51);
			font-size: 34rpx;
			line-height: 41rpx;
			white-space: nowrap;
			background: linear-gradient(179deg, #FDD303 0%, #FFAC05 100%);
			height: 90rpx;
			position: relative;

			.image_1 {
				left: 21rpx;
				top: 27rpx;
				width: 19rpx;
				height: 35rpx;
				position: absolute;
			}

			.cate {
				width: 100%;
				padding: 20rpx 0;
				color: rgb(51, 51, 51);
				font-size: 34rpx;
				font-weight: 500;
				line-height: 41rpx;
				white-space: nowrap;
				text-align: center;
			}

			.control {
				right: 21rpx;
				top: 27rpx;
				font-size: 28rpx;
				position: absolute;
			}
		}

		.z-paging {
			height: calc(100% - 188rpx);
		}

		.c_item {
			width: 100%;
			padding: 30rpx 20rpx;
			display: flex;
			border-bottom: 2rpx solid #F0F0F0;

			.left_type {
				padding: 0 8rpx;
				background: linear-gradient(163deg, #FDD303 0%, #FF960C 100%);
				border-radius: 4rpx;
				font-size: 22rpx;
				margin-right: 20rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
			}

			.middle_text {
				flex: 1;
			}

			.right_btn {
				display: flex;
				justify-content: center;
				align-items: center;

				.image_1 {
					width: 36rpx;
					height: 36rpx;
					margin-left: 20rpx;
				}
			}
		}

		.end_c {
			height: 98rpx;
			background-color: #333333;
			color: #FFFFFF;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.left {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				height: 100%;

				.image_1 {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		}
	}
</style>
